1.伪类解决margin-top塌陷:
如果两个不浮动的盒子相互嵌套,对内部的盒子设置margin-top会导致属性被自动转移到外部的盒子上,导致内部盒子的margin-top设置失败最靠谱的解决方式是为父元素添加一个伪类:
/*伪类解决margin-top塌陷*/.clearfix:before{ content:""; display: table;
}
解决margin-top塌陷
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>margin-top塌陷</title>
<style>
body, a, p{ margin:0; padding:0;
} .outside{ width:300px; height: 400px; background-color: green; margin: 0 auto;
} .inside{ width: 50px; height:50px; background-color: gold; margin-top: 50px;
} /*伪类解决margin-top塌陷*/
.clearfix:before{ content:""; display: table;
} </style></head><body><div class="outside clearfix">
<div class="inside">
</div></div></body></html>2.浮动子元素动态改变父元素宽度:
在设计网页布局时,为了便于快速布局,会将子元素设为浮动元素,父元素宽度设为固定,高度不设置,这样随着子元素的添加,父元素的高度就会动态变化,但尴尬的是,浮动子元素并不能"撑开父元素的高度",于是为父元素增加伪类便成了解决这种尴尬局面最好的方式;
.clearfix:after{ content: ""; display: table; clear:both;
}
子元素动态改变父元素尺寸
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>浮动子元素宽度</title>
<style>
.outside{ width: 200px; border: 2px solid red;
} .inside{ float: left; width: 200px; height: 100px; margin: 20px 0 20px; border: 1px solid green;
} .clearfix:after{ content: ""; display: table; clear:both;
} </style></head><body><div class="outside clearfix">
<div class="inside">
</div>
<div class="inside">
</div></div></body></html>小结:
以上两种情况极其常见,解决方式也很类似,所以可对两种方式做一个封装:
.clearfix:before, .clearfix:after{ content: ""; display: table;
}.clearfix:after{ clear:both;
}/*适配非主流浏览器(IE浏览器)*/.clearfix{ zoom:1;
}以后遇到上面两种问题,只要将 小结 中的源码引入到对应的css(层叠样式表),最后在父元素class属性中 中引入clearfix即可
<div class="outside clearfix"> <div class="inside"> </div> <div class="inside"> </div></div>
reset.css
h1,h2,h3,h4,h5,h6,p,body,ul,ol,dl,dd,dt,input{ /*去掉默认样式*/
margin: 0; padding: 0;
}ul,ol{ /*去掉左边的点或者数字*/
list-style: none;
}a{ /*去掉下划线*/
text-decoration: none;
}em,i{ /*去掉斜体*/
font-style: normal;
}b,strong{ /*去掉加粗*/
font-weight: normal;
}/*清除浮动影响 和清除margintop塌陷 合在一起的写法*/.clearfix:before,.clearfix:after{ content: ""; display: table;
}.clearfix:after{ clear: both;
}.clearfix{ /*兼容ie*/
zoom:1;
}点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦